<template>
  <view class="my-shop">

    <!-- 修改后的顶部部分 -->
    <view class="top-bar">
      <picker class="picker" mode="date" @change="onStartDateChange" value="{{selectedStartDate}}">
        <view class="date-picker">
          <text>开始日期: </text>
		  <span>{{selectedStartDate}}</span>
        </view>
      </picker>
      <picker class="picker" mode="date" @change="onEndDateChange" value="{{selectedEndDate}}">
        <view class="date-picker">
          <text>结束日期: </text>
		  <span>{{selectedEndDate}}</span>
        </view>
      </picker>
	  <picker fields="month" mode="date" @change="onDateChange" :value="month">
	    <view class="query-revenue-button">{{date}}月销售</view>
	  </picker>

      
    </view>
    <!-- 顶部部分结束 -->

    <view class="stats-table">
      <view class="stats-row">
        <text class="stats-label">成交单数</text>
        <text class="stats-value">{{shopList.LastMonthOrder}}</text>
      </view>
      <view class="stats-border"></view>
      <view class="stats-row">
        <text class="stats-label">成交金额</text>
        <text class="stats-value">¥{{shopList.totalPayMoney}}</text>
      </view>
      <view class="stats-border"></view>
      <view class="stats-row">
        <text class="stats-label">访问流量</text>
        <text class="stats-value">{{shopList.VisitNumHistory}}</text>
      </view>
    </view>

    <view class="order-query-section">
      <view class="order-query-header">
        <text class="section-title">营业额</text>
        <view class="stats-border"></view>
      </view>
      <view class="daily-revendue">
        <view>
          <text>{{shopList.TodaytotalPayMoney}}元</text>
        </view>
      </view>
    </view>

    <view class="order-query-section">
      <view class="order-query-header">
        <text class="section-title">订单查询</text>
        <view class="stats-border"></view>
      </view>
      <text class="stat-label">订单数:</text>
      <view class="order-query-content">
        <view class="order-query-stat">
          <view class="stat-value">
            <text>新增</text>
            <text class="num">{{shopList.TodayOrder}}</text>
            <text>单</text>
          </view>
        </view>
        <view class="order-query-stat">
          <view class="stat-value">
            <text>退单</text>
            <text class="num">{{shopList.refund}}</text>
            <text>单</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { myshop } from '../../api/myshop/myshop';
  export default {
    data() {
      return {
        shopList: {},
        selectedStartDate: new Date().toISOString().split('T')[0], // 默认开始日期
        selectedEndDate: new Date().toISOString().split('T')[0], // 默认结束日期
		date:'',
		month:'',
      };
    },
    onLoad() {
      this.getMyShop();
    },
    methods: {
		onDateChange(e) {
		      const month = e.detail.value; 
			  this.month = month;
			  let monthArray = month.split('-'); 
			  let lastElement = monthArray[monthArray.length - 1]; 
			  // console.log(lastElement);
		      this.date = lastElement; // 更新显示的月份
			  this.getRevenueByDateRange();
		    },
      getMyShop() {
        const userId = uni.getStorageSync('userId');
		 let data={
			 userId:userId,
			 }
        myshop(data).then((res) => {
          this.shopList = res.data.data;
        });
      },
      onStartDateChange(e) {
        this.selectedStartDate = e.detail.value;
        // console.log('Selected start date:', this.selectedStartDate);
		this.getRevenueByDateRange();
      },
      onEndDateChange(e) {
        this.selectedEndDate = e.detail.value;
        // console.log('Selected end date:', this.selectedEndDate);
		this.getRevenueByDateRange();
      },
      getRevenueByDateRange() {
        // console.log('查询时间段的营业额逻辑', this.selectedStartDate, this.selectedEndDate);
        // 可以调用接口传入 selectedStartDate 和 selectedEndDate 以获取数据
		 const userId = uni.getStorageSync('userId');
		let data={
			userId:userId,
			 strTime:this.selectedStartDate,
			 endTime:this.selectedEndDate,
			lastMonth:this.month,
		}
		// console.log(data);
		myshop(data).then((res) => {
		  this.shopList = res.data.data;
		});
		
      },
    },
  };
</script>
<style scoped>
  .my-shop {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
  }

  /* 添加的顶部样式 */
  .top-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
  }
	
	.picker {
		 flex-grow: 1;
		 display: flex;
		 justify-content: center;
	}
  .date-picker {
	 display: flex;
	     flex-direction: column;
    font-size: 14px;
    color: #333;
    padding: 10px 0;
  }
 .query-revenue-button {
    background-color: #04be02;
    color: white;
    border: none;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    margin: 0;
	padding: 10px;
  }

  .query-revenue-button:hover {
    background-color: #04af01;
  }
  .monthly-revenue-button {
    background-color: #04be02;
    color: white;
    border: none;
    /* padding: 10px 20px; */
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
	margin: 0%;
  }

  .monthly-revenue-button:hover {
    background-color: #04af01;
  }

  .order-query-section {
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
  }

  .section-title {
    padding: 10rpx 20rpx;
    font-size: 14px;
    display: block;
    color: #333;
  }

  .stats-header,
  .order-query-header {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }

  .stats-table {
    height: 80px;
    display: flex;
    flex-direction: row;
    background-color: #fff;
    justify-content: space-around;
    margin: 20rpx 0;
    border-radius: 20rpx;
  }

  .stats-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .stats-border {
    border: 0.1px solid #eee;
  }

  .stats-label {
    font-size: 14px;
    color: #666;
  }

  .stats-value {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    padding: 10rpx 0;
  }

  .daily-revendue {
    display: flex;
    padding: 50rpx;
    font-size: 100rpx;
    color: forestgreen;
    justify-content: center;
  }

  .order-query-content {
    display: flex;
    padding: 50rpx;
    justify-content: space-between;
  }

  .order-query-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .stat-label {
    font-size: 14px;
    color: #666;
    padding: 0rpx 20rpx;
  }

  .stat-value {
    font-size: 14px;
    color: #333;
  }

  .num {
    font-size: 100rpx;
    color: forestgreen;
  }
</style>
